import React, {
    Component
  } from 'react';
  import {
    Modal,
    TextInput,
    View,
    Image,
    Text,
    StyleSheet,
    TouchableHighlight,
    TouchableWithoutFeedback
  } from 'react-native';


import px2dp from '../utils/px2dp'
  
import { width, height, totalSize } from 'react-native-dimension';
  
  const styles = StyleSheet.create({
        listItemContainer:{
            flex:1,
            justifyContent: "space-between",
            alignItems: "center",
            flexDirection: "row",
            height:px2dp(50),
        },
        listItemLeft:{
            flex:1,
            alignItems: "center",
            flexDirection: "row",
        },
        listItemRight:{
            marginRight:10,
            alignItems: "center",
            flexDirection: "row",
        },
  });

  const CLListItem = ({title,subTitle,icon,rightIcon,onPress}) => (
      <TouchableWithoutFeedback onPress={() => {onPress()}}>
        <View style={styles.listItemContainer}>
                <View style={styles.listItemLeft}>
                    {
                        icon == undefined ? null:
                        <Image style={{width:px2dp(24),height:px2dp(24)}} source={icon} />
                    }
                    <Text style={{marginLeft:10,fontSize: 16}}>{title}</Text>
                </View>
                <View style={styles.listItemRight}>
                {subTitle!=undefined?
                    <Text style={{color:'gray'}}>{subTitle}</Text>
                    :
                    null
                }
                {rightIcon == undefined?
                    <Image style={{width:px2dp(15),height:px2dp(20)}} source={require('../image/img_right_grey.png')} />
                    :
                    <Image style={{width:px2dp(24),height:px2dp(24)}} source={rightIcon} />
                }
                </View>
        </View>
      </TouchableWithoutFeedback>
  )

  export default CLListItem;